<template>
 <div class="rightbox" >
     <div class="recom-top" v-for="(it,index) in itemList" :key="index">
        <div class="recom-top-title" v-if="index === 0">
            <a href="#" class="title">
                {{it.title}}
                <img src="../../assets/img/cate_right_img.png" alt="">
            </a>
        </div>
         <div class="recom-top-title" v-else> 
            <a href="#" class="title">
                {{it.title}}
                <img v-if="index===0" src="../../assets/img/cate_right_img.png" alt="">
            </a>
        </div>
        <ul class="recom-top-list" v-if="index===0" >
                <router-link tag="li"  :data-cateId="item.id_param"    :to="getCateId(item.id_param)" :key="index" v-for="(item,index) in it.list" >
                    <img :src="item.photo" alt="">
                    <p>{{item.name}}</p>  
                </router-link>
         </ul>
          <ul class="recom-bottom-list" v-else>
             <li v-for="(item,index) in it.list" :key="index" >
                 <img :src="item.logo" alt="">
                 <p>{{item.name}}</p>
             </li>
         </ul> 
     </div>
 </div>
</template>
 
<script>
    import dataBus from '../../databus/eventbus';
export default {
    props:['itemList'],
    data(){
        return {
            // classList:this.itemList
            // itemList :[]
        }
    },     
   async mounted(){
        
    },
    methods:{
        getCateId(cateId) {
            return '/goodslist/' + cateId.split('_')[1];
        },
        // clickHander(cateId) {
        //     dataBus.$emit('getCateId',cateId.split('_')[1])
        // }
    },
    computed:{
        // getTitle() {
        //     console.log(this.itemList[0]);
        //     return this.itemList[0].title
        // }
    }
}
</script>
<style lang="stylus">
.rightbox
    flex 1
    height 6rem
    overflow-y scroll
    border-top 5px solid #f3f4f5;
    padding-bottom .45rem
    .recom-bottom-list  
        display flex
        flex-wrap wrap
        li
            width 50%
            padding 0 .05rem
            margin-top .1rem
            img 
                display block
                margin: 0 auto;
                margin-top: 4px;
                height .45rem

            p
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 20px;
                color: #333;
                font-size: 13px;
                text-align center 
                margin-top: 10px;
    .recom-top-list
        display flex
        flex-wrap wrap
        li
            width 33.3%
            padding 0 .05rem
            margin-top .1rem
            img 
                display block
                width 100%
            p
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 20px;
                color: #333;
                font-size: 13px;
                text-align center 
                margin-top: 10px;

    
    div.recom-bottom 
        padding .05rem .05rem .2rem 
        div.recom-bottom-title
            width 100%
            .title
                display block
                height .19rem
                font-size .12rem
                color #999
                padding-left .05rem           
    div.recom-top
        padding .05rem .05rem .2rem
        div.recom-top-title
            width 100%
            .title
                display block
                height .19rem
                font-size .12rem
                color #999
                padding-left .05rem
                img 
                    float right
                    height .1rem
                    margin .05rem .05rem 0 0


</style>